Skip to main content

fetch 请求

总结：「是什么、怎么做、解决了什么问题、优点是、缺点是、怎么解决缺点」

是什么​

fetch() 是一个全局方法，提供一种简单，合理的方式跨网络获取资源，它的请求是基于 Promise 的。

特点​

  • fetch 默认不带 cookie：传递 cookie 时，必须在 header 参数内加上 credentials:'include'，才会像 xhr 将当前 cookie 带有请求中。
  • 异常处理：fetch 不同于 xhr ，xhr 自带取消、错误等方法，所以服务器返回 4xx 或 5xx 时，是不会抛出错误的，需要手动处理，通过 response 中的 status 字段来判断。

怎么做​

fetch(url,options).then((response)=>{
// 处理http相应
},(error)=>{
// 处理错误
})

url ：是发送网络请求的地址 options：发送请求参数

  • body:http 请求参数
  • mode:指定请求模式。默认值为 cros:允许跨域;same-origin:只允许同源请求;no-cros:只限于 get、post 和 head,并且只能使用有限的几个简单标头。
  • cache:用户指定缓存。
  • method:请求方法，默认 GET
  • signal:用于取消 fetch
  • headers:http 请求头设置
  • keepalive:用于页面卸载时，告诉浏览器在后台保持连接，继续发送数据。
  • credentials:cookie 设置，默认 omit，忽略不带 cookie，same-origin 同源请求带 cookie，inclue 无论跨域还是同源都会带 cookie。

GET 方式​

fetch('http://localhost:80/fetch.html?user=xinjn&password=123456',{method:'GET'}).then((response)=>{
    // 处理http相应
    console.log('相应',response);
},(error)=>{
    // 处理错误
    console.error(error)
})

POST 方式​

fetch(`http://localhost:80/fetch.html?user=xinjn&password=123456`,
    {
        method:'GET',
        headers:{
            'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'
        },
        body:'user=xinjn&password=123456'
    }).then((response)=>{
    // 处理http相应
    console.log('相应',response);
},(error)=>{
    // 处理错误
    console.error(error)
})

如果是提交 json 数据时，需要把 json 转换成字符串。如body:JSON.stringify(json) 如果提交的是表单数据，使用 formData 转化下，如：body:new FormData(form)

解决了什么问题​

优点​

fetch 是 XMLRequest 的升级版，使用 js 脚本发出网络请求，但是与 XMLHttpRequest 不同的是，fetch 方式使用的 Promise,相比 XMLHttpResquest 更简洁。

缺点​

fetch 是相对较新的技术，IE 浏览器不支持，还有其他低版本浏览器也不支持，因此如果使用 fetch 时，需要考虑浏览器兼容问题。

怎么解决缺点​

解决办法：引入 polyfill 完美支持 IE8 以上。

polyfill 的原理就是探测 fetch 是否支持，如果不支持则用 xhr 实现。支持 fetch 的浏览器，响应中文会乱码，所以使用 fetch-detector 和 fetch-ie8 解决乱码问题。

参考文章​